<!DOCTYPE html>
<html lang="en">
<!-- <%!
    ErrorCode errorCode = null;
%> -->
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="images/icon.ico" type="/image/x-icon" />
    <link rel="stylesheet" href="css/login.css" />
    <script src="js/login.js"></script>
    <title>Register - Orders Management Display System</title>
</head>
<body>
<div class="container">
    <form action="" class="login-form" name="login_form" method="post">
        <h2>Register</h2>
        <input id="username" type="text" name="username" placeholder="User"/>
        <div class="verify-box" id="verify-box-1">*Please enter the correct format!</div>
        <input id="password" type="password" name="password" placeholder="Password" >
        <div class="verify-box" id="verify-box-2">*Please enter the correct format!</div>
        <button type="button" id="register-submit">Register</button>
        <button type="reset" name="reset" id="reset" onclick="resetVerifyBoxes()">Reset</button>
        <button type="button" name="back" id="back" onclick="window.location.href='/'">Back</button>
        <p class="form-footer"><br>&copy; 2022 <b><i>Team BluePen</i></b>. All rights reserved.</p>
    </form>
</div>

<script type="text/javascript">
    const submitButton = document.getElementById('register-submit');
    submitButton.addEventListener("click", sendRegister)
    window.onload = function () {
        sendCurrent()
    }

    function sendCurrent() {
        const request = new XMLHttpRequest()
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                const json = JSON.parse(request.responseText)
                if (json.errorCode === undefined) {
                    window.location.href = "/overview.html"
                }
            } else if (request.readyState === 4 && request.status !== 200) {
                alert(request.status)
            }
        }

        request.open("POST", "/api/user/current", true)
        request.send()
    }

    function sendRegister() {
        if (!loginVerify()) {
            return
        }

        const request = new XMLHttpRequest()
        const username = document.getElementById("username").value
        const password = document.getElementById("password").value
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                const json = JSON.parse(request.responseText)
                if (json.errorCode === "00000") {
                    window.location.href = "/"
                    return
                }
                alert(json.message)
            } else if (request.readyState === 4 && request.status !== 200) {
                alert(request.status)
            }
        }

        request.open("POST", "/api/user/register", true)
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send(`username=${username}&password=${password}`)
    }
</script>

</body>
</html>
